<template>
  <div>
    <ul>
      <li>
        <div class="sub-li">
          <a href="" class="top">
            <slot />
            <div class="company">
              <h4>{{ companyInfo.name }}</h4>
              <p>
                {{ companyInfo.intro }} | <span>{{ companyInfo.jobo }}</span>
              </p>
            </div>
          </a>
          <a href="" class="bottom">
            <p>
              <span>{{ companyInfo.detail }}</span>
              <span>{{ companyInfo.jobt }}</span>
              <span>{{ companyInfo.pay }}</span>
            </p>
          </a>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "MyCard",
  props: ["companyInfo"],
};
</script>

<style lang="less" scoped>
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  li {
    height: 140px;
    width: 280px;
    margin: 0 16px 16px 0;
    background: #fff;
    &:hover {
      box-shadow: 0 0 1px gray;
    }
    div {
      width: 100%;
      height: 100%;
      .top {
        height: 77px;
        margin: 0 20px;
        padding-top: 20px;
        border-bottom: dashed 1px #ededed;
        display: flex;
        justify-content: space-between;
        text-decoration: none;
        img {
          height: 55px;
          width: 55px;
          float: left;
          border-radius: 10px;
          border: solid 1px #f2f5fa;
        }
        .company {
          margin-left: 65px;
          text-align: right;
          overflow: hidden;
          text-overflow: ellipsis;
          h4 {
            margin: 0;
            height: 25px;
            line-height: 25px;
            font-size: 16px;
            font-weight: 400;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #414a60 !important;
          }
          p {
            height: 40px;
            line-height: 41px;
            color: #898e9d;
            font-size: 12px;
            display: inline-block;
            white-space: nowrap;
          }
        }
      }
      .bottom {
        color: #8d92a1;
        height: 42px px;
        line-height: 42px;
        font-size: 12px;
        text-decoration: none;
        &:hover {
          opacity: 0.8;
        }
        p {
          width: 240px;
          margin: 0 auto;
        }
      }
    }
  }
}
</style>
